<template>
  <div class="app-container">
    <el-form v-show="showSearch" :model="queryParams" ref="queryRef" :inline="true">
      <el-form-item label="用户名称：" prop="nickName">
        <el-input
          v-model.trim="queryParams.nickName"
          placeholder="请输入用户名称"
          clearable
          @keyup.enter="handleSearch(true)"
          style="width: 200px"
        />
      </el-form-item>
      <el-form-item label="手机号：" prop="phone">
        <el-input
          v-model.trim="queryParams.phone"
          placeholder="请输入用户手机号"
          clearable
          @keyup.enter="handleSearch(true)"
          style="width: 200px"
        />
      </el-form-item>

      <el-form-item label="&nbsp;">
        <el-button @click="handleSearch(false)">重置</el-button>
        <el-button type="primary" @click="handleSearch(true)">查询</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="list">
      <el-table-column label="用户" align="center" prop="nickName" />
      <el-table-column label="手机号" align="center" prop="phone" />
      <el-table-column label="储值金额（元）" align="center" prop="money" />
      <el-table-column label="赠送消费金额（元）" align="center" prop="giftGold" />
      <el-table-column label="余额变动明细" align="center">
        <template #default="{ row }">
          <el-button
            type="primary"
            v-hasPermi="['storedBalance:storedBalance:views']"
            link
            @click="handleViews(row)"
            >查看</el-button
          >
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template #default="{ row }">
          <el-button
            v-hasPermi="['storedBalance:storedBalance:refund']"
            type="primary"
            :disabled="row.money <= 0"
            link
            @click="handleRefund(row)"
            >退款</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    />

    <balanceDetails ref="balanceDetailsRef" />
  </div>
</template>
<script setup>
import { getAmountListApi, postRefundApi } from '@/api/storedEquity'
import balanceDetails from './components/balanceDetails'

const { proxy } = getCurrentInstance()
const showSearch = ref(true)
const loading = ref(false)
const queryRef = ref()
const queryParams = ref({
  pageNum: 1,
  pageSize: 10,
  nickName: null,
  phone: null
})

const list = ref([])
const total = ref(0)

const balanceDetailsRef = ref()
function handleSearch(type) {
  if (type) {
    queryParams.value.pageNum = 1
    getList()
  } else {
    queryRef.value.resetFields()
    handleSearch(true)
  }
}
function handleViews(row) {
  console.log('查看')
  balanceDetailsRef.value.init(row)
}
function handleRefund(row) {
  ElMessageBox.confirm(`退款金额${row.money}元`, '请确认退款金额', {
    confirmButtonText: '确认',
    cancelButtonText: '取消'
  })
    .then(() => {
      postRefundApi({ clientId: row.clientId, refundMoney: row.money }).then(() => {
        proxy.$modal.msgSuccess(`用户${row.nickName}的退款申请已提交，请稍后查看`)
        getList()
      })
    })
    .catch((err) => console.log(err))
}
function getList() {
  getAmountListApi(queryParams.value)
    .then((res) => {
      loading.value = false
      console.log(res)
      list.value = res.rows || []
      total.value = res.total || 0
    })
    .catch(() => {
      loading.value = false
    })
}
getList()
</script>
<style lang="scss" scoped></style>
